<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="jquery.min.js"></script>
<title>电梯导航</title>
<style>
* {
margin: 0;
padding: 0;
}

body {
position: relative;
}

div.one {
width: 100%;
height: 400px;
background: red;
}

div.one:nth-child(odd) {
background: green;
}

div.nav {
width: 100px;
position: fixed;
top: 500px;
left: 10px;
display: none;
}

li {
width: 100px;
height: 100px;
background: yellow;
}

li:nth-child(even) {
background: orange;
}

div.r {
position: fixed;
top: 500px;
right: 10px;
display: none;
}

button {
width: 100px;
height: 100px;
background: orangered;
}
</style>
</head>

<body>
<!-- 当页面滚动到一定距离时，电梯导航才显示出来，当点击电梯导航栏时，页面就滚动到响应位置 -->
<div class="one">1</div>
<div class="one">2</div>
<div class="one">3</div>
<div class="one">4</div>
<div class="nav">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="r">
<button>返回顶部</button>
</div>


<script>
// dom元素加载完毕后触发方法
$(function () {// 先获取到到电梯导航的offset top 然后如果滚动值》=top值，就显示电梯导航，返回顶部按钮也同理
// 获取文档被卷去的顶部的数值
// var a = $(document).scrollTop();
// console.log(a);
// // 获取电梯导航距离浏览器顶部的数值
var b = $('.nav').offset().top;
// // 获取返回顶部盒子距离浏览器顶部的数值
var c = $('.r').offset().top;
c=b=500;
console.log('b======='+b)
console.log('c======='+c)

function A() {
// 当文档被卷去的顶部的数值>=电梯导航距离浏览器顶部的偏移时，就显示出来,否则隐藏
if ($(document).scrollTop() >= b) {
$('.nav').stop().fadeIn();
} else {
$('.nav').stop().fadeOut();
}
}
function B() {
// 当被卷去的值》=盒子距离顶部的值，就显示
if ($(document).scrollTop() >= c) {
$('.r').stop().fadeIn();
} else {
$('.r').stop().fadeOut();
}
}
// A();
// B();


$(window).scroll(function () {// 当页面滚动时触发方法
console.log('b======='+b)
console.log('c======='+c)
console.log($(document).scrollTop())
console.log('------')
console.log($(document).scrollTop())
A();
B();
});
// // 点击按钮时返回顶部
$('.r').click(function () {
// $(document).scrollTop(0);
$("body,html").stop().animate({
scrollTop: 0,
});
});
})
</script>
